<template>
  <view class="bg-white form">
    <up-form :label-width="70">
      <!--      <up-form-item label="是否休息">-->
      <!--        <up-switch v-if="form !== undefined" v-model="form.is_rest"/>-->
      <!--      </up-form-item>-->
      <view v-if="form?.is_rest">
        <up-card title="假期余额">
          <template #body>
            <up-cell
                v-for="holidayBalance in holidayBalances" :key="holidayBalance.leave_code"
                :title="holidayBalance.leaveName !== undefined ? holidayBalanceCellTitle(holidayBalance.leaveName) : undefined"
                :value="holidayBalance.quota_num !== undefined ? holidayBalanceCellValue(holidayBalance.quota_num) : undefined"
            />
          </template>
        </up-card>
        <up-form-item label="假休原因">
          <up-input @focus="handleReasonInputFocus"/>
        </up-form-item>
      </view>
      <view v-else>
        <view v-for="(scheduleDetail, index) in form?.schedule_detail" :key="scheduleDetail.number">
          <up-form-item
              v-if="scheduleDetail.check_type !== undefined"
              :label="labelProducer(scheduleDetail.check_type, index)"
          >
            <up-input v-model="scheduleDetail.check_time" @focus="handleCheckTimeInputFocus"/>
          </up-form-item>
        </view>
      </view>
    </up-form>
  </view>
  <holiday-picker
      v-if="scheduleToView?.userid !== undefined"
      v-model:show="isHolidayPickerShow"
      :user-id="scheduleToView?.userid"
  />
  <up-datetime-picker
      :show="isDateTimePickerShow"
      @cancel="handleDateTimePickerCancel"
      @close="handleDateTimePickerClose"
  />
</template>
<script lang="ts" setup>
import {ref} from "vue"
import {onLoad} from "@dcloudio/uni-app";
import {storeToRefs} from "pinia";
import {useScheduleStore} from "@/store/schedule";
import type ScheduleRequest from "@/api/types/schedule/ScheduleRequest";
import type CheckType from "@/api/types/schedule/CheckType";
import {getHolidayBalancesByUserId} from "@/api/holidayBalance";
import type HolidayBalanceResponse from "@/api/types/HolidayBalanceResponse";
import HolidayPicker from "@/components/picker/HolidayPicker.vue";

const {scheduleToView} = storeToRefs(useScheduleStore())
const holidayBalances = ref<HolidayBalanceResponse[]>()
const form = ref<ScheduleRequest>()
const isDateTimePickerShow = ref(false)
const isHolidayPickerShow = ref(false)

function closeDateTimePicker() {
  isDateTimePickerShow.value = false
}

async function getHolidayBalances() {
  if (scheduleToView.value?.userid !== undefined) {
    const {data} = await getHolidayBalancesByUserId(scheduleToView.value?.userid)
    if (data.data !== undefined) {
      holidayBalances.value = data.data
    }
  }
}

getHolidayBalances()

function handleCheckTimeInputFocus() {
  isDateTimePickerShow.value = true
}

function handleDateTimePickerCancel() {
  closeDateTimePicker()
}

function handleDateTimePickerClose() {
  closeDateTimePicker()
}

function handleReasonInputFocus() {
  isHolidayPickerShow.value = true
}

function holidayBalanceCellTitle(holidayName: string) {
  return `${holidayName}假`
}

function holidayBalanceCellValue(holidayDays: number) {
  return `${holidayDays}天`
}

function labelProducer(checkType: CheckType, index: number) {
  switch (checkType) {
    case "OnDuty":
      return `第${(index % 2) + 1}次上班时间`
    case "OffDuty":
      return `第${(index % 2) + 1}次下班时间`
  }
}

onLoad((query) => {
  if (query !== undefined) {
    const currentSchedule = scheduleToView.value?.scheduleList.find(scheduleDetail => scheduleDetail.day === query.date)
    console.log(currentSchedule)
    if (currentSchedule !== undefined) {
      form.value = {
        is_rest: 0,
      }
      if (currentSchedule.schedule_detail === undefined || currentSchedule.schedule_detail.length === 0) {
        console.log("添加")
        form.value.schedule_detail = [
          {
            check_type: "OnDuty",
            number: 1
          },
          {
            check_type: "OffDuty",
            number: 2
          }
        ]
      }
      console.log(form.value)
    }
  }
})
</script>
<style lang="scss" scoped>
.bg-white {
  background-color: white;
}

.form {
  padding: 10rpx
}
</style>
